<style scoped>
.app_outer{width: 100%;height: 100%;position: relative;padding-left: 400px;background: #fff;border-radius: 8px;}
.app_outer.is_del{padding-left: 0;}
.display{position: absolute;left: 20px;top: 0;width: 380px;height: 100%;background: #fff;padding: 60px 0;}
.app_outer.is_del .display{display: none;}

.phone-outer{width: 100%;height: 100%;margin: auto;overflow: hidden;flex-direction: column;}
.phone-outer .content{width: 100%;font-size: 16px;padding-left: 46px;align-items: flex-end;
  background: url("@/assets/img/foot.png");background-size: 100%;background-position-y: bottom;background-repeat: no-repeat;background-color: #ededed;}
.phone-outer .content .btn1{width: 33%;position: relative;text-align: center;padding-bottom: 11px;}
.phone-outer .content .btn1>p{line-height: 30px;display: block;border-right: 02px solid #f1f1f1;cursor: pointer;}
.phone-outer .content .btn1>p:hover{color: var(--el-color-primary-light-3);}
.phone-outer .content .btn1:last-child>p{border-right: none;}
.phone-outer .content .btn1>ul{position: relative;border: 01px solid var(--ok);margin: 0 02px;margin-bottom: 21px;background: #fff;}
.phone-outer .content .btn1>ul:after{content: '';display: block;position: absolute;left: 50%;bottom: 0;width: 10px;height: 10px;background: #fff;transform: translate(-50%,50%) rotate(45deg);border-bottom: 01px solid var(--ok);border-right: 01px solid var(--ok);}
.phone-outer .content .btn2>li{line-height: 36px;display: block;cursor: pointer;}
.phone-outer .content .btn2>li:hover{color: var(--el-color-primary-light-3);}
</style>
<template>
  <div class="flex app_outer" :class="{is_del: $get('is_del')}">
    <div class="display">
      <div class="phone-outer flex">
        <img src="@/assets/img/head.png" style="width: 100%;">
        <div class="content max flex">
          <div class="btn1 max" v-for="btn1 in btns">
            <ul v-if="btn1.children" class="btn2">
              <li v-for="btn2 in btn1.children" class="text-ellipsis" @click="to_edit(btn2)">{{btn2.name}}</li>
            </ul>
            <p class="text-ellipsis" @click="to_edit(btn1)">{{btn1.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <list_url ref="list_url" :config="config" style="flex-shrink: 1;">
      <template #action="{row}">
        <el-button @click="to_edit(row)" size="small">详情</el-button>
      </template>
    </list_url>
  </div>
</template>
<script>
import {iframe, in_right_admin} from "@/js/tool.js";
import {ajax} from "@/js/api_tool.js";
import s94Mjs from "s94-js";
import {_config, decode_config} from "@/js/s94_tool.js";

export default {
  props: ['__iframe'],
  data(){
    let app = this, btns = {}, is_del = this.$get('is_del');

    if(in_right_admin('WechatMenu/add')) btns['添加'] = function(){ iframe('wechat_menu/edit') }
    if(in_right_admin('WechatMenu/delete')) btns['彻底删除'] = function(){ app.$refs['list_url'].delete() }
    if(in_right_admin('WechatMenu/update_menu')) btns['更新菜单'] = function(){
      app.$confirm('是否确定按当前配置更新微信公众号的菜单').then(()=>{
        ajax({url:'/admin/wechat_menu/update_menu', loading:true});
      }).catch(()=>{})
    }
    let type_map = {
      "click": "点击事件",
      "view": "网页",
      "miniprogram": "小程序",
      "scancode_push": "扫码推事件",
      "scancode_waitmsg": "扫码待回复",
      "pic_sysphoto": "拍照发图",
      "pic_photo_or_album": "拍照或相册发图",
      "pic_weixin": "微信相册发图",
      "location_select": "发送位置",
      "article_id": "图文消息",
      "article_view_limited": "打开图文"
    };
    let forms_config = {};
    let list_cols = {
      id: {name:'id', label:'ID', width:'65px', fixed:'left', type: 'hidden', order:true},
      alias:{name:'alias', label:'标题', width:'200px', align:'left'},
      type:{name:'type', label:'类型', type:'select_one', width: '200px', config: type_map},
      extend:{name:'extend', label:'扩展数据', type: 'json_param'},
      sort:{name:'sort', label:'排序', type:'text_one', width:'60px', can_edit:true, onchange:this.edit},
    };
    list_cols['action'] = {name:'action', label:'操作', width:'80px', type:'action', fixed:'right'};

    return {
      btns: [],
      config: {
        api: '/admin/wechat_menu/'+(is_del?'recycle':'list'),
        title: "菜单按钮列表"+(is_del?'(已删除)':''),
        btns: btns,
        forms_config: forms_config,
        list_cols: list_cols,
        resdata: function(list){
          let ids=[], parent_ids=[], res=[];
          app.btns = decode_config(list, {content_key:'name', value_key:'id', parent_key:'parent_id'});

          s94Mjs.each(list, function(v){
            ids.push(v.id);
          })
          s94Mjs.each(list, function(v){
            if (!~ids.indexOf(v.parent_id) && !~parent_ids.indexOf(v.parent_id)){
              parent_ids.push(v.parent_id);
            }
          })
          function loop(list, parent_id, prefix){
            var res=[];
            s94Mjs.each(list, function(row) {
              if (row['parent_id'] != parent_id) return;
              row['alias'] = prefix+row['name'];
              res.push(row);
              var last_prefix = "&nbsp;&nbsp;&nbsp;&nbsp;"+(prefix?prefix:"└ ");
              res = res.concat(loop(list, row['id'], last_prefix));
            });
            return res;
          }
          parent_ids.forEach(function(v){
            res = res.concat(loop(list, v, ''));
          })
          return res;
        },
      },
    }
  },
  methods: {
    to_edit(row){
      let can_edit = in_right_admin('WechatMenu/edit') && ~[0,row.tenant_id].indexOf(_config('this_tenant.id'))
      let param = {
        id: row.id,
      }
      if (!can_edit) param['is_info'] = 1;
      iframe('wechat_menu/edit?'+s94Mjs.param_encode(param))
    },
    edit(row,col,v){
      let app = this;
      if(!in_right_admin('WechatMenu/edit')) return;
      ajax(`/admin/wechat_menu/edit?id=${row.id}&${col.name}=${v}`, function (res){
        if (col.type=='radio_switch' && res.data==0) app.$refs['list_url'].list();
        if (col.type!='radio_switch' && res.data>0) app.$refs['list_url'].list();
      })
    },
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;

  }
}
</script>
